<script setup>
import { User, Lock, Message, DocumentChecked } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import {userRegisterService,sendVerificationCodeService} from '@/api/user'



const router = useRouter();
const formModel = ref({
  userName: "",
  email: "",
  verification: "",
  password: "",
  resPassword: "",
});
const rules = {
  userName: [
    { required: true, message: "请输入昵称" },
    { min: 3, max: 5, message: "昵称长度需是3-15位" },
  ],
  password: [{ required: true, message: "请输入密码" },{min: 5,max:12,message:'密码长度需是5-12位'},],
  
  resPassword: [
    { required: true, message: "请再次输入密码" },
    {min: 5,max:12,message:'密码长度需是5-12位'},
    {
      validator: (rule, value, callback) => {
        if (formModel.value.password === formModel.value.resPassword) {
          callback();
        } else {
          callback(new Error("两次密码不一致"));
        }
      },
    },
  ],
  email: [
    { required: true, message: "请输入邮箱" },
    { type: "email", message: "邮箱格式不正确" },
  ],
  verification: [
    { required: true, message: "请输入邮箱验证码",trigger: "blur" }
  ]
};
const ruleForm = ref();
const register = async () => {
  await ruleForm.value.validate(); //进行所有表单项验证
  //调用接口注册
  const res=await userRegisterService(formModel.value)
  console.log(res)
  //根据返回的响应给出消息提示(成功/失败)
  ElMessage.success('注册成功');
  //如果注册成功跳转登录页
  router.push("/login");
  

};

const emailFormItem=ref()
const timer=ref()
const seconds=30
const currentSeconds=ref(seconds)
//调接口发送邮箱验证码
const sendEmailCode= async ()=>{
    if(timer.value){
        return 
    }
  await emailFormItem.value.validate()
  const res=await sendVerificationCodeService(formModel.value.email)
  console.log(res)
    timer.value=setInterval(() => {
        currentSeconds.value--
        if (currentSeconds.value === 0) {
          currentSeconds.value = seconds
          clearInterval(timer.value)
          timer.value = null
        }
      }, 1000)  
}

</script>
<template>
  <div>
    <el-container>
      <el-header>
        <div style="text-align: center; font-size: 25px; font-weight: bolder">
          <h3>言智空间</h3>
        </div>
      </el-header>

      <el-main>
        <el-card class="login-module">
          <template v-slot:header >
            
              <span
                style="
                  text-align: center;
                  font-size: 20px;
                  font-family: 'Microsoft YaHei';
                "
              >
                <i style="margin-right: 18px"></i>注册
              </span>
            
          </template>
          <div >
            <el-form 
            style="width: 500px; margin-left: 85px;"
              :model="formModel"
              :rules="rules"
              ref="ruleForm"
              label-position="left"
              label-width="auto"
            >
              <el-form-item prop="userName" label="昵称">
                <el-input
                  v-model="formModel.userName"
                  placeholder="请输入昵称"
                  :prefix-icon="User"
                ></el-input>
              </el-form-item>
              <el-form-item ref="emailFormItem" prop="email" label="邮箱">
                <el-input
                  v-model="formModel.email"
                  placeholder="请输入邮箱"
                  :prefix-icon="Message"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input
                  v-model="formModel.password"
                  placeholder="请输入密码"
                  show-password
                  :prefix-icon="Lock"
                ></el-input>
              </el-form-item>
              <el-form-item prop="resPassword" label="再次输入密码">
                <el-input
                  v-model="formModel.resPassword"
                  placeholder="请输再次输入密码"
                  show-password
                  :prefix-icon="Lock"
                ></el-input>
              </el-form-item>
              <el-form-item prop="verification" label="邮箱验证码">
                <el-input
                  style="width: auto"
                  v-model="formModel.verification"
                  placeholder="请输邮箱验证码"
                  :prefix-icon="DocumentChecked"
                ></el-input>
                
                <!-- <el-button :disabled='currentSeconds != seconds' @click="sendEmailCode()"   style="margin-left: 30px" plain
                  >{{currentSeconds === seconds ? '获取邮箱验证码' : currentSeconds+'秒后重新获取'}}</el-button
                > -->
                <!-- :ready="emailFormItem.validateState" -->
                <el-button :disabled='currentSeconds != seconds' @click="sendEmailCode()"   style="margin-left: 30px" plain
                  >{{currentSeconds === seconds ? '获取邮箱验证码' : currentSeconds+'秒后重新获取'}}</el-button
                >
                
              </el-form-item>
              <el-form-item style="padding-left: 40%">
                <el-button type="primary" @click="register()">注册</el-button>
                <el-button @click="ruleForm.resetFields()">重置</el-button>
              </el-form-item>

              <el-form-item style="padding-left: 90%">
                <el-link
                  style=""
                  type="info"
                  :underline="false"
                  @click="router.push('/login')"
                >
                  登录 →
                </el-link>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<style>
.login-module {
  /*width: 380px;*/
  /*height: 325px;*/
  margin: auto;
  margin-top: 60px;
  /*border: none;*/
  /* position: absolute; */
  right: 500px;
  text-align: center;
  width: 50%;
}

</style>
